<template>
  <div class="recommend-page">
    <div class="head-box">
      <img class="backImg" :src="bgUrl" alt="">
      <div class="head" ref="headImgBox">
        <div class="left iconfont" @click="onNext(0)">&#xe7c3;</div>
        <div class="ul">
          <div ref="imgDom" class="li" v-for="(item,index) in imgUrl" v-bind:key="item.imageUrl">
            <img :class="{
              'on':index===imgIndex,
              'noneAnimation':isAbove,
            }" :src="item.imageUrl" alt="图片">
          </div>
          <div class="circle-box">
            <div @click="imgIndex = index" class="circle" :class="{'onRed':index===imgIndex}"
                 v-for="(item,index) in imgUrl" v-bind:key="index"></div>
          </div>
        </div>
        <div class="download">
          <img src="https://s2.music.126.net/style/web2/img/index/download.png" alt="" @click="toRoute('/download')">
          <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
        <div class="right iconfont" @click="onNext(imgUrl.length-1)">&#xe7c5;</div>
      </div>
    </div>
    <div class="onBody">
      <div class="left">
        <div class="title-box">
          <div class="title-left">
            <router-link class="title-one" to="/find/playlist">热门推荐</router-link>
            <router-link to="/find/playlist?id=23&name=王子怡">华语</router-link>
            <router-link to="/find/playlist">流行</router-link>
            <router-link to="/find/playlist">摇滚</router-link>
            <router-link to="/find/playlist">民谣</router-link>
            <router-link to="/find/playlist">电子</router-link>
          </div>
          <div class="title-right">
            <router-link to="/find/playlist">更多</router-link>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-head">
          <img src="https://music.163.com/style/web2/img/dis_vip_card.png" alt="">
          <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
          <button>用户登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'recommend-page',
  props: {},
  data: function () {
    return {
      message: 'recommend',
      imgIndex: 0,//图片索引值
      isAbove: false,//鼠标是否停留在轮播图上面
      imgUrl: [],//接受传来的路径地址
      timerId: undefined,
      time: 5000,//轮播图自动跳转的间隔时间
    }
  },
  computed: {
    bgUrl() {
      return this.imgUrl[this.imgIndex]?.imageUrl
    },

  },
  created() {
    this.axiosFunction()
    // this.handleMouseLeave()//方法1
    //方法2
    this.$nextTick(() => {
      this.timerFunction(this.time)
    })//$nextTick非常关键,因为这里要获取dom

  },
  beforeUpdate() {

  },

  methods: {
    //方法1：通过定时器ID来算
    // handleMouseEnter() {
    //   console.log('鼠标移入了！');
    //   // 清除定时器
    //   if (this.timerId) {
    //     clearInterval(this.timerId);
    //     console.log(this.timerId)
    //     this.timerId = null; // 重置timerId，确保它没有被错误的定时器ID污染
    //   }
    // },
    // handleMouseLeave() {
    //   console.log('鼠标移出了！');
    //   console.log(this.timerId)
    //   // 设置定时器
    //   this.timerId = this.startTimer(); // 调用startTimer方法来设置定时器，并存储返回的ID
    // },
    // startTimer() {
    //   console.log(this.timerId)
    //   // 返回一个定时器的ID
    //   return setInterval(() => {
    //     this.imgIndex = (this.imgIndex + 1) % 10; // 循环增加imgIndex，并在达到10时重置为0
    //   }, 500);
    // },

    onNext(len) {
      this.imgIndex === len ? this.imgIndex = this.imgUrl.length - 1 - len : this.imgIndex = this.imgIndex + (len ? 1 : -1)
    },

    //方法2：定义一个布尔值，随移入移出发生变化，来控制定时器
    timerFunction(t) {
      this.$refs.headImgBox.addEventListener('mouseenter', () => this.isAbove = true)
      this.$refs.headImgBox.addEventListener('mouseleave', () => this.isAbove = false)
      //需要执行的代码放在定时器内
      setInterval(() => {
        if (this.isAbove) return
        this.onNext(this.imgUrl.length - 1)
      }, t)
    },
    toRoute(src) {
      this.$router.push(src)
    },
    axiosFunction() {
      axios.get('http://123.207.219.13:3003/banner')
          .then(response => {
            // 处理数据
            this.imgUrl = response.data.banners
            console.log(this.imgUrl)
          })
          .catch(error => {
            console.error('Error fetching data:', error);
          })
    },


  }
}
</script>
<style scoped>
@keyframes animationer {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.recommend-page {
  .onBody {
    width: 1100px;
    margin: auto;
    display: flex;
    justify-content: center;

    .left {
      width: 732px;
      padding: 20px;
      background-color: pink;
      box-sizing: border-box;
      .title-box {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 2px solid #c20c0c;
        .title-left {
          a {
            padding: 0 10px;
            border-right: 1px solid #ccc;
            font-size: 12px;

            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }

    .right {
      background-color: pink;
      width: 254px;

      .right-head {
        font-size: 12px;
        position: relative;
        background: linear-gradient(to bottom, #ffffff, #e2e2e2);

        img {
          width: 100%;
          cursor: pointer;
        }
        p {
          padding: 10px;
        }
        button {
          border: none;
          cursor: pointer;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 5px;
          margin: 10px 0;
          color: #fff;
          width: 100px;
          height: 30px;
          font-size: 12px;
          box-shadow: 0 1px 2px -1px black;
          text-shadow: 0 1px 0 #8a060b;
          background: linear-gradient(to bottom, #e71e27, #9f1c20);
          &:hover {
            background: linear-gradient(to bottom, #ef3641, #d11720);
          }
        }
      }
    }
  }

  .head-box {
    overflow: hidden;
    position: relative;

    .on {
      display: block !important;
    }

    .onRed {
      background-color: red !important;
    }

    .noneAnimation {
      animation: none !important;
    }

    .backImg {
      position: absolute;
      z-index: -1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8000px;
      filter: blur(300px);
    }

    .head {
      width: 1100px;
      height: 280px;
      display: flex;
      margin: auto;

      .ul {
        .circle-box {
          display: flex;
          justify-content: center;
          position: relative;
          top: -25px;

          .circle {
            width: 8px;
            height: 8px;
            opacity: 0.7;
            border-radius: 50%;
            margin: 0 10px;
            cursor: pointer;
            background-color: white;

            &:hover {
              background-color: red;
              box-shadow: 0 0 4px 1px #000;

            }

          }
        }

        .li {
          img {
            animation: animationer 5s infinite;
            width: 732px;
            height: 280px;
            display: none;
          }
        }

      }

      .iconfont {
        width: 37px;
        height: 63px;
        line-height: 63px;
        text-align: center;
        font-size: 40px;
        cursor: pointer;
        color: #ccc;
        margin: auto 0;
        user-select: none;

        &:hover {
          background-color: #333;
          opacity: 0.8;
        }
      }

      .right {
        margin-left: 20px;
      }

      .left {
        margin-right: 20px;
      }

      .download {
        width: 254px;
        background-image: url("@/assets/img/download.png");
        z-index: 66;
        text-align: center;
        position: relative;

        img {
          margin-top: 300px;
          clip-path: polygon(0 290px, 215px 290px, 215px 345px, 0 345px);
          cursor: pointer;
          position: absolute;
          top: -404px;
          right: -18.5px;
          opacity: 0.6;

          &:hover {
            opacity: 1;

          }
        }

        p {
          font-size: 12px;
          color: white;
          margin-top: 255px;
          opacity: 0.5;
        }

      }

    }

  }
}


</style>

